<template>
	<view class="t-load-more">
		<uni-icons class="t-load-more-roll" v-if="moreFlag === 1" type="spinner-cycle" size="20"></uni-icons>
		<text v-if="moreFlag === 0">加载更多</text>
		<text v-else-if="moreFlag === 1">正在加载</text>
		<text v-else>已经到底啦</text>
	</view>
</template>

<script>
	export default {
		name: "LoadMore",
		props: {
			moreFlag: {
				type: Number,
				default () {
					return 0;
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.t-load-more {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		padding: 20rpx 0;

		>text {
			margin-left: 10rpx;
		}
		
		@keyframes rotate {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		
		&-roll {
			position: relative;
			animation: rotate 2s linear infinite;
		}
	}
</style>